<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>


<script type="text/javascript">

	$(function(){
        $(".timezx").datetimepicker({
            minView: "month",
            language:  'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "top-left"
        });

		
		//定制字段
		$("#definedColumns > li").click(function(e) {
			//防止下拉菜单消失
	        e.stopPropagation();
	    });
//给创建按钮绑定事件,用于打开创建客户的模态窗口
		$("#addCustomerBtn").click(function () {

			$(".time").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "top-left"
			});

			$.ajax({
				url:"customer/addCustomer.do",
				type:"get",
				data:{


				},

				dataType:"json",
				success:function (resp) {
		/*
			resp:
				{"userList":userList}
		*/

			var html="<option></option>";


				$.each(resp.userList,function (i,n) {//铺垫所有者下拉框
					html+='<option value="'+n.id+'">'+n.name+'</option>';
				})

					$("#create-customerOwner").html(html)

					//将当前登录用户设为下拉框默认选项
					var currentUser="${sessionScope.user.id}"
					$("#create-customerOwner").val(currentUser)

				}
			})

			$("#createCustomerModal").modal("show")



		})
//给保存按钮绑定事件,执行客户的新增操作
		$("#saveCustomerBtn").click(function () {

			$.ajax({

				url:"/crm/customer/saveCustomer.do",
				type:"post",
				data:{
					"owner":$.trim($("#create-customerOwner").val()),
					"name":$.trim($("#create-customerName").val()),
					"website":$.trim($("#create-website").val()),
					"phone":$.trim($("#create-phone").val()),
					"contactSummary":$.trim($("#create-contactSummary").val()),
					"nextContactTime":$.trim($("#create-nextContactTime").val()),
					"description":$.trim($("#create-describe").val()),
					"address":$.trim($("#create-address1").val())
				},
				dataType:"json",
				success:function(resp){
		/*
			resp:
				{"success":true/false}
		*/

				if(resp.success){
					alert("新增客户成功")

						$("#create-customerOwner").val("")
						$("#create-website").val("")
						$("#create-name").val("")
						$("#create-phone").val("")
						$("#create-describe").val("")
						$("#create-contactSummary").val("")
						$("#create-nextContactTime").val("")
						$("#create-address1").val("")

						showCustomerList(1,8)

					$("#createCustomerModal").modal("hide")


                    }else {
                        alert("新增客户失败")
                    }

				}


			})



		})
//给修改按钮绑定事件，用于铺垫修改客户的模态窗口
        $("#editCustomerBtn").click(function(){



            var $xz=$("input[name=customer]:checked")
            if($xz.length==0){
                alert("请选择你需要修改的客户")
            }else if($xz.length>1) {
                alert("每次最多只能改一条客户")
            }else {
                var customerId=$xz.val()
                //alert("您需要修改的id是"+customerId)

                //将需要修改的客户的id放入到隐藏域中,用于下次的更新操作
                $("#editCustomerId").val(customerId)

                $.ajax({
                    url:"customer/editCustomer.do",
                    type:"get",
                    data:{
                        "customerId":customerId
                    },
                    dataType:"json",
                    success:function (resp) {
            /*
                resp:
                    {"customer",{客户}}
            */


                //铺垫修改客户的所有者下拉框
                        var ownerHtml="<option></option>";
                        $.each(resp.userList,function (i,n) {
                            ownerHtml+='<option value="'+n.id+'">'+n.name+'</option>'
                        })

                        $("#edit-owner").html(ownerHtml)


                        //处理单条
                        $("#edit-owner").val(resp.customer.owner)
                        $("#edit-website").val(resp.customer.website)
                        $("#edit-phone").val(resp.customer.phone)
                        $("#edit-name").val(resp.customer.name)
                        $("#edit-contactSummary").val(resp.customer.contactSummary)
                        $("#edit-describe").val(resp.customer.description)
                        $("#edit-nextContactTime").val(resp.customer.nextContactTime)
                        $("#edit-address").val(resp.customer.address)
                        //$("#edit-").val()


                        $("#editCustomerModal").modal("show")

                    }






                })

            }



        })
//给更新按钮绑定事件，执行客户的修改操作
        $("#updateCustomerBtn").click(function(){

            //从隐藏域中取出需要修改的客户的id
            var customerId=$("#editCustomerId").val()

            $.ajax({
                url:"customer/updateCustomer.do",
                type:"post",
                data:{
                    "id":customerId,
                    "owner":$.trim($("#edit-owner").val()),
                    "name":$.trim($("#edit-name").val()),
                    "website":$.trim($("#edit-website").val()),
                    "phone":$.trim($("#edit-phone").val()),
                    "contactSummary":$.trim($("#edit-contactSummary").val()),
                    "nextContactTime":$.trim($("#edit-nextContactTime").val()),
                    "description":$.trim($("#edit-describe").val()),
                    "address":$.trim($("#edit-address").val())

                },
                dataType:"json",
                success:function(resp){
         /*
            resp:
                    {"success":true/false}
         */

                if(resp.success){
                    alert("修改客户成功")

                    showCustomerList(1,8)

                    $("#editCustomerModal").modal("hide")
                }else {
                    alert("修改客户失败")
                }



                }


            })

        })
//给删除按钮绑定事件,执行客户的删除操作
        $("#deleteCustomerBtn").click(function () {

            var $xz=$("input[name=customer]:checked")


            if($xz.length==0){
                alert("请选择你需要删除的客户")

            }else {

                if(confirm("确定要删除所选择的客户吗？")){
                    var parameter="";

                    for(var i=0;i<$xz.length;i++){

                        parameter+="id="+$xz[i].value

                        if(i<$xz.length-1){
                            parameter+="&"
                        }

                    }


                    $.ajax({
                        url:"customer/deleteCustomer.do",
                        type:"post",
                        data:parameter,
                        dataType:"json",
                        success:function(resp){
            /*
                resp:
                    {"success":true/false}

            */
                    if(resp.success){
                        alert("删除客户成功")

						showCustomerList(1,8)
                    }else {
                        alert("删除客户失败")
                    }



                        }



                    })





                }

            }




        })
//展现客户列表
		showCustomerList(1,8)

//复选框全选
		$("#qx").click(function () {
			//alert("事件绑定成功")
			//通过全选框来控制其他复选框
			$("input[name=customer]").prop("checked",$("#qx").prop("checked"))

		})

		$("#customerList").on("click",$("input[name=customer]"),function () {
			//通过其他复选框来控制全选框
			$("#qx").prop("checked",($("input[name=customer]:checked").length==$("input[name=customer]").length?true:false))


		})


//给查询按钮绑定事件,执行分页查询
		$("#searchCustomerBtn").click(function(){


			$("#hidden-name").val($.trim($("#search-name").val()))
			$("#hidden-owner").val($.trim($("#search-owner").val()))
			$("#hidden-phone").val($.trim($("#search-phone").val()))
			$("#hidden-website").val($.trim($("#search-website").val()))

			showCustomerList(1,8)


		})



	});
//页面加载完毕分割线=======================================================================

//展现客户列表方法
		function showCustomerList(pageNo,pageSize){
			//alert("showCustomerList方法执行开始")

			$.ajax({
				url:"customer/getCustomerList.do",
				type:"get",
				data:{

					"name":$("#hidden-name").val(),
					"owner":$("#hidden-owner").val(),
					"phone":$("#hidden-phone").val(),
					"website":$("#hidden-website").val(),
					"pageNo":pageNo,
					"pageSize":pageSize

				},
				dataType:"json",
				success:function (resp) {
		/*
			resp:
				{"total":total,"customerList":[{客户1}.{客户2},{客户3}]}

		 */

				var html="";
				$.each(resp.dataList,function (i,n) {
							html+='<tr>';
							html+='<td><input type="checkbox" name="customer" value="'+n.id+'"/></td>';
							html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'customer/detail.do?id='+n.id+'\'">'+n.name+'</a></td>';
							html+='<td>'+n.owner+'</td>';
							html+='<td>'+n.phone+'</td>';
							html+='<td>'+n.website+'</td>';
							html+='</tr>';
				})

					$("#customerList").html(html)

					//计算总页数
					var totalPages=resp.total%pageSize==0?resp.total:parseInt(resp.total/pageSize)+1;


					//处理完数据后，加入分页插件
					$("#activityPage").bs_pagination({
						currentPage: pageNo, // 页码
						rowsPerPage: pageSize, // 每页显示的记录条数
						maxRowsPerPage: 20, // 每页最多显示的记录条数
						totalPages: totalPages, // 总页数
						totalRows: resp.total, // 总记录条数

						visiblePageLinks: 3, // 显示几个卡片

						showGoToPage: true,
						showRowsPerPage: true,
						showRowsInfo: true,
						showRowsDefaultInfo: true,

						onChangePage : function(event, data){
							showCustomerList(data.currentPage , data.rowsPerPage);
						}
					});



				}

			})



	}


</script>
</head>
<body>

	<!-- 创建客户的模态窗口 -->
	<div class="modal fade" id="createCustomerModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建客户</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-customerOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-customerOwner">
								  <%--<option>zhangsan</option>
								  <option>lisasas</option>--%>
								</select>
							</div>
							<label for="create-customerName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-customerName">
							</div>
						</div>
						
						<div class="form-group">
                            <label for="create-website" class="col-sm-2 control-label">公司网站</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-website">
                            </div>
							<label for="create-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-phone">
							</div>
						</div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                        <div style="position: relative;top: 15px;">
                            <div class="form-group">
                                <label for="create-contactSummary" class="col-sm-2 control-label">联系纪要</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="3" id="create-contactSummary"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="create-nextContactTime" class="col-sm-2 control-label">下次联系时间dd5</label>
                                <div class="col-sm-10" style="width: 300px;">
                                    <input type="text" class="form-control time" id="create-nextContactTime" readonly>
                                </div>
                            </div>
                        </div>

                        <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="create-address1" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="create-address1"></textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveCustomerBtn">保存596</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改客户的模态窗口 -->
	<div class="modal fade" id="editCustomerModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改客户</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="edit-customerOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-owner">
								  <%--<option>zhangsan</option>
								  <option>lisi</option>
								  <option>wangwu</option>--%>
								</select>
							</div>
							<label for="edit-customerName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-name" value="动力节点">
							</div>
						</div>
						
						<div class="form-group">
                            <label for="edit-website" class="col-sm-2 control-label">公司网站</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-website" value="http://www.bjpowernode.com">
                            </div>
							<label for="edit-phone" class="col-sm-2 control-label">公司座机</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-phone" value="010-84846003">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe"></textarea>
							</div>
						</div>
						
						<div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative;"></div>

                        <div style="position: relative;top: 15px;">
                            <div class="form-group">
                                <label for="create-contactSummary1" class="col-sm-2 control-label">联系纪要</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="3" id="edit-contactSummary"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="create-nextContactTime2" class="col-sm-2 control-label">下次联系时间</label>
                                <div class="col-sm-10" style="width: 300px;">
                                    <input type="text" class="form-control timezx" id="edit-nextContactTime" readonly>
                                </div>
                            </div>
                        </div>

                        <div style="height: 1px; width: 103%; background-color: #D5D5D5; left: -13px; position: relative; top : 10px;"></div>

                        <div style="position: relative;top: 20px;">
                            <div class="form-group">
                                <label for="create-address" class="col-sm-2 control-label">详细地址</label>
                                <div class="col-sm-10" style="width: 81%;">
                                    <textarea class="form-control" rows="1" id="edit-address">北京大兴大族企业湾</textarea>
                                </div>
                            </div>
                        </div>
					</form>
					
				</div>
				<div class="modal-footer">
                    <input type="hidden" id="editCustomerId">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateCustomerBtn">更新</button>
				</div>
			</div>
		</div>
	</div>


	<input type="hidden" id="hidden-name">
	<input type="hidden" id="hidden-owner">
	<input type="hidden" id="hidden-phone">
	<input type="hidden" id="hidden-website">



	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>客户列表</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="search-owner">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司座机663</div>
				      <input class="form-control" type="text" id="search-phone">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">公司网站</div>
				      <input class="form-control" type="text" id="search-website">
				    </div>
				  </div>
				  
				  <button type="button" id="searchCustomerBtn" class="btn btn-default" >查询669</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" data-toggle="modal" id="addCustomerBtn"><span class="glyphicon glyphicon-plus"></span> 创建655</button>
				  <button type="button" class="btn btn-default" data-toggle="modal" id="editCustomerBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteCustomerBtn"><span class="glyphicon glyphicon-minus"></span> 删除5656</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox"  id="qx"/></td>
							<td>名称</td>
							<td>所有者</td>
							<td>公司座机</td>
							<td>公司网站</td>
						</tr>
					</thead>
					<tbody id="customerList">
						<%--<tr>
							<td><input type="checkbox" /></td>
							<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">动力节点996</a></td>
							<td>zhangsan</td>
							<td>010-84846003</td>
							<td>http://www.bjpowernode.com</td>
						</tr>
                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">动力节点</a></td>
                            <td>zhangsan</td>
                            <td>010-84846003</td>
                            <td>http://www.bjpowernode.com</td>
                        </tr>--%>
					</tbody>
				</table>
			</div>
			
			<div  style="height: 50px; position: relative;top: 30px;">
				<div id="activityPage"></div>

			<%--<div>
					<button type="button" class="btn btn-default" style="cursor: default;">共<b>50</b>条记录</button>
				</div>
				<div class="btn-group" style="position: relative;top: -34px; left: 110px;">
					<button type="button" class="btn btn-default" style="cursor: default;">显示</button>
					<div class="btn-group">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							10
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">20</a></li>
							<li><a href="#">30</a></li>
						</ul>
					</div>
					<button type="button" class="btn btn-default" style="cursor: default;">条/页</button>
				</div>
				<div style="position: relative;top: -88px; left: 285px;">
					<nav>
						<ul class="pagination">
							<li class="disabled"><a href="#">首页</a></li>
							<li class="disabled"><a href="#">上一页</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li><a href="#">下一页</a></li>
							<li class="disabled"><a href="#">末页</a></li>
						</ul>
					</nav>
				</div>--%>
			</div>

			<%--<div style="height: 50px; position: relative;top: 70px;">
				<div id="activityPage"></div>
			</div>--%>

		</div>
		
	</div>
</body>
</html>